<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%= basePath%>"/>
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>


    <script type="text/javascript">
        function showActivity(pageNo, pageSize) {
            //重新查询活动时取消全选框
            $("#selectAllActivityCheckBox").prop("checked", false)
            var name = $("#query_activityName").val()
            var owner = $("#query_owner").val()
            var startDate = $("#query_startDate").val()
            var endDate = $("#query_endDate").val()
            $.ajax({
                url: "workbench/activity/queryByCondition.do",
                data: {
                    "name": name,
                    "owner": owner,
                    "startDate": startDate,
                    "endDate": endDate,
                    "pageSize": pageSize,
                    "pageNo": pageNo
                },
                type: "post",
                dataType: "json",
                success: function (jsonStr) {
                    //显示活动
                    var htmlStr = ""
                    $.each(jsonStr.activityList, function (i, activity) {
                        htmlStr += "<tr class=\"active\">"
                        htmlStr += "		<td><input type=\"checkbox\" value=\"" + activity.id + "\"/></td>"
                        htmlStr += "		<td><a style=\"text-decoration: none; cursor: pointer;\" href=\"workbench/activity/toActivityDetails.do?activityId="+activity.id+"\">" + activity.name + "</a></td>"
                        htmlStr += "		<td>" + activity.owner + "</td>"
                        htmlStr += "		<td>" + activity.startDate + "</td>"
                        htmlStr += "		<td>" + activity.endDate + "</td>"
                        htmlStr += "</tr>"
                    })
                    $("#showActivityBody").html(htmlStr)
                    //显示分页
                    var totalPages = 1;
                    if (jsonStr.totalRows % pageSize == 0) {
                        totalPages = jsonStr.totalRows / pageSize;
                    } else {
                        totalPages = parseInt(jsonStr.totalRows / pageSize) + 1;
                    }

                    //对容器调用bs_pagination工具函数，显示翻页信息
                    $("#bsDiv").bs_pagination({
                        currentPage: pageNo,//当前页号,相当于pageNo

                        rowsPerPage: pageSize,//每页显示条数,相当于pageSize
                        totalRows: jsonStr.totalRows,//总条数
                        totalPages: totalPages,  //总页数,必填参数.

                        visiblePageLinks: 5,//最多可以显示的卡片数

                        showGoToPage: true,//是否显示"跳转到"部分,默认true--显示
                        showRowsPerPage: true,//是否显示"每页显示条数"部分。默认true--显示
                        showRowsInfo: true,//是否显示记录的信息，默认true--显示

                        //用户每次切换页号，都自动触发本函数;
                        //每次返回切换页号之后的pageNo和pageSize
                        onChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked
                            //js代码
                            //alert(pageObj.currentPage);
                            //alert(pageObj.rowsPerPage);
                            showActivity(pageObj.currentPage, pageObj.rowsPerPage);
                        }
                    });
                }
            })
        }

        $(function () {
            //导入市场活动
            $("#importActivityBtn").click(function (){
                var activityName = $("#activityFile").val();
                var suffix=activityName.substr(activityName.length-4,4)
                if(suffix.toLowerCase()!=".xls"){
                    alert("必须上传excel文件!")
                    return
                }
                var activityFile = $("#activityFile")[0].files[0];
                if(activityFile.size>5*1024*1024){
                    alert("文件大小不能超过5MB!")
                    return;
                }
                var formData=new FormData()
                formData.append("activityFile",activityFile)
                $.ajax({
                    url:"workbench/activity/importActivity.do",
                    type:"post",
                    contentType:false,
                    processData:false,
                    dataType:"json",
                    data:formData,
                    success:function (data){
                        if(data.state=="0"){
                            alert(data.msg)
                        }else{
                            alert("成功导入"+data.msg+"条数据")
                            showActivity(1,$("#bsDiv").bs_pagination("getOption","rowsPerPage"))
                            $("#importActivityModal").modal("hide")
                        }
                    }
                })
            })
            //导出选择的市场活动
            $("#exportActivityXzBtn").click(function (){
                var jquery= $("#showActivityBody input[type='checkbox']:checked")
                if(jquery.size()<1){
                    alert("请选择要导出的市场活动！")
                    return
                }
                var ids=""
                $.each(jquery,function (){
                    ids+="ids="+this.value+"&"
                })
                ids=ids.substr(0,ids.length-1)
                window.location.href="workbench/activity/downActivityByChoice.do?"+ids
            })
            //导出所有市场活动
            $("#exportActivityAllBtn").click(function (){
                window.location.href="workbench/activity/downAllActivity.do"
            })
            //创建市场活动按钮
            $("#activityCreateBtn").click(function () {
                $("#activityCreateForm")[0].reset()
                $("#createActivityModal").modal("show")
            })
            //保存创建市场活动按钮
            $("#saveActivityCreateBtn").click(function () {
                var owner = $("#owner").val()
                var name = $.trim($("#name").val())
                var startDate = $.trim($("#startDate").val())
                var endDate = $.trim($("#endDate").val())
                var description = $.trim($("#description").val())
                var cost = $.trim($("#cost").val())
                if (startDate > endDate) {
                    alert("活动开始时间不能大于结束时间！")
                    return;
                }
                var expression = /^(([1-9]\d*)|0)$/
                if (!expression.test(cost)) {
                    alert("请检查活动支出是否正确！")
                    return;
                }
                $.ajax({
                    url: "workbench/activity/createActivity.do",
                    type: "post",
                    data: {
                        "owner": owner,
                        "name": name,
                        "startDate": startDate,
                        "endDate": endDate,
                        "description": description,
                        "cost": cost
                    },
                    dataType: "json",
                    success: function (json) {
                        if (json.state == "0") {
                            alert(json.msg)
                        } else {
                            $("#createActivityModal").modal("hide")
                            showActivity(1,$("#bsDiv").bs_pagination("getOption","rowsPerPage"))
                        }
                    }
                })
            })
            //页面加载时调用显示市场活动函数
            showActivity(1, 10)
            //条件查询显示市场活动
            $("#queryBtn").click(function () {
                showActivity(1, $("#bsDiv").bs_pagination("getOption", "rowsPerPage"))
            })
            //选择当页所有市场活动
            $("#selectAllActivityCheckBox").click(function () {
                $("#showActivityBody input[type='checkBox']").prop("checked", this.checked)
            })
            //任意市场活动勾选
            $("#showActivityBody").on("click", "input[type='checkbox']", function () {
                if ($("#showActivityBody input[type='checkbox']").size() == $("#showActivityBody input:checked").size()) {
                    $("#selectAllActivityCheckBox").prop("checked", true);
                } else {
                    $("#selectAllActivityCheckBox").prop("checked", false);
                }
            })
            //删除市场活动按钮
            $("#deleteBtn").click(function () {
                var checkedBoxes = $("#showActivityBody input[type='checkbox']:checked")
                if (checkedBoxes.size() == 0) {
                    alert("请选择要删除的市场活动！")
                    return
                } else {
                    if (window.confirm("确认删除所选的市场活动吗？")) {
                        var ids = ""
                        $.each(checkedBoxes, function () {
                            ids += "ids=" + this.value + "&"
                        })
                        ids = ids.substr(0, ids.length - 1)
                        $.ajax({
                            url: "workbench/activity/deleteByIds.do",
                            type: "post",
                            data: ids,
                            dataType: "json",
                            success: function (returnObject) {
                                if (returnObject.state == "1") {
                                    showActivity(1, $("#bsDiv").bs_pagination("getOption", "rowsPerPage"))
                                }else{
                                    alert(returnObject.msg)
                                }
                            }
                        })
                    }
                }
            })

            //修改市场活动按钮
            $("#modifyBtn").click(function (){
                var checkedActivity= $("#showActivityBody input[type='checkbox']:checked")
                if(checkedActivity.size()==0){
                    alert("请选择要修改的市场活动！")
                    return
                }else if(checkedActivity.size()>1){
                    alert("一次只能修改一场活动！")
                    return
                }else{
                    var id=checkedActivity.val()
                    $.ajax({
                        url:'workbench/activity/queryActivityById.do',
                        type:"post",
                        data:{"id":id},
                        dataType:"json",
                        success:function (data){
                            $("#modify_id").val(data.id)
                            $("#modify_owner").val(data.owner)
                            $("#modify_name").val(data.name)
                            $("#modify_startDate").val(data.startDate)
                            $("#modify_endDate").val(data.endDate)
                            $("#modify_cost").val(data.cost)
                            $("#modify_description").val(data.description)
                        }
                    })
                }
                $("#modifyActivityModal").modal("show")
            })
            //点击更新按钮保存修改
            $("#modifyConfirmBtn").click(function (){
                var id = $("#modify_id").val()
                var owner = $.trim($("#modify_owner").val());
                var name = $.trim($("#modify_name").val());
                var startDate = $.trim($("#modify_startDate").val());
                var endDate = $.trim($("#modify_endDate").val());
                var cost = $.trim($("#modify_cost").val());
                var description = $.trim($("#modify_description").val());
                if (startDate > endDate) {
                    alert("活动开始时间不能大于结束时间！")
                    return;
                }
                var expression = /^(([1-9]\d*)|0)$/
                if (!expression.test(cost)) {
                    alert("请检查活动支出是否正确！")
                    return;
                }
                $.ajax({
                    url:"workbench/activity/updateById.do",
                    type:"post",
                    data:{
                        id:id,
                        owner:owner,
                        name:name,
                        startDate:startDate,
                        endDate:endDate,
                        cost:cost,
                        description:description
                    },
                    dataType:"json",
                    success:function (data){
                        if(data.state=="0"){
                            alert(data.msg)
                        }else{
                            $("#modifyActivityModal").modal("hide")
                            showActivity($("#bsDiv").bs_pagination("getOption","currentPage"),$("#bsDiv").bs_pagination("getOption","rowsPerPage"))
                        }
                    }
                })
            })
        });
    </script>
</head>
<body>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="activityCreateForm">

                    <div class="form-group">
                        <label for="owner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="owner">
                                <%--								  <option>zhangsan</option>--%>
                                <%--								  <option>lisi</option>--%>
                                <%--								  <option>wangwu</option>--%>
                                <c:forEach items="${users}" var="user">
                                    <option value="${user.id}">${user.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="name" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="startDate" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control activityDate" id="startDate">
                        </div>
                        <label for="endDate" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control activityDate" id="endDate">
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="description"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveActivityCreateBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="modifyActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">
                    <input type="hidden" id="modify_id">
                    <div class="form-group">
                        <label for="modify_owner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;" >
                            <select class="form-control" id="modify_owner">
                                <c:forEach items="${users}" var="user">
                                    <option value="${user.id}">${user.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="modify_name" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;" >
                            <input type="text" class="form-control" id="modify_name" >
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="modify_startDate" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control" id="modify_startDate">
                        </div>
                        <label for="modify_endDate" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control" id="modify_endDate">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="modify_cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="modify_cost">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="modify_description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="modify_description"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="modifyConfirmBtn">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入市场活动的模态窗口 -->
<div class="modal fade" id="importActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
            </div>
            <div class="modal-body" style="height: 350px;">
                <div style="position: relative;top: 20px; left: 50px;">
                    请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
                </div>
                <div style="position: relative;top: 40px; left: 50px;">
                    <input type="file" id="activityFile">
                </div>
                <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;">
                    <h3>重要提示</h3>
                    <ul>
                        <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                        <li>给定文件的第一行将视为字段名。</li>
                        <li>请确认您的文件大小不超过5MB。</li>
                        <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                        <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                        <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                        <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="query_activityName" value="">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="query_owner" value="">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <input class="form-control" type="text" id="query_startDate" value=""/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <input class="form-control" type="text" id="query_endDate" value="">
                    </div>
                </div>

                <button type="button" class="btn btn-default" id="queryBtn">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-primary" id="activityCreateBtn"><span
                        class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button type="button" class="btn btn-default" id="modifyBtn"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button type="button" class="btn btn-danger" id="deleteBtn"><span
                        class="glyphicon glyphicon-minus"></span> 删除
                </button>
            </div>
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal">
                    <span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）
                </button>
                <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）
                </button>
                <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）
                </button>
            </div>
        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="selectAllActivityCheckBox"/></td>
                    <td>名称</td>
                    <td>所有者</td>
                    <td>开始日期</td>
                    <td>结束日期</td>
                </tr>
                </thead>
                <tbody id="showActivityBody">

                </tbody>
            </table>
            <div id="bsDiv">

            </div>
        </div>

        <%--        <div style="height: 50px; position: relative;top: 30px;">--%>
        <%--            <div>--%>
        <%--                <button type="button" class="btn btn-default" style="cursor: default;">共<b id="countB"></b>条记录</button>--%>
        <%--            </div>--%>
        <%--            <div class="btn-group" style="position: relative;top: -34px; left: 110px;">--%>
        <%--                <button type="button" class="btn btn-default" style="cursor: default;">显示</button>--%>
        <%--                <div class="btn-group">--%>
        <%--                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">--%>
        <%--                        10--%>
        <%--                        <span class="caret"></span>--%>
        <%--                    </button>--%>
        <%--                    <ul class="dropdown-menu" role="menu">--%>
        <%--                        <li><a href="#">20</a></li>--%>
        <%--                        <li><a href="#">30</a></li>--%>
        <%--                    </ul>--%>
        <%--                </div>--%>
        <%--                <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>--%>
        <%--            </div>--%>
        <%--            <div style="position: relative;top: -88px; left: 285px;">--%>
        <%--                <nav>--%>
        <%--                    <ul class="pagination">--%>
        <%--                        <li class="disabled"><a href="#">首页</a></li>--%>
        <%--                        <li class="disabled"><a href="#">上一页</a></li>--%>
        <%--                        <li class="active"><a href="#">1</a></li>--%>
        <%--                        <li><a href="#">2</a></li>--%>
        <%--                        <li><a href="#">3</a></li>--%>
        <%--                        <li><a href="#">4</a></li>--%>
        <%--                        <li><a href="#">5</a></li>--%>
        <%--                        <li><a href="#">下一页</a></li>--%>
        <%--                        <li class="disabled"><a href="#">末页</a></li>--%>
        <%--                    </ul>--%>
        <%--                </nav>--%>
        <%--            </div>--%>
        <%--        </div>--%>

    </div>

</div>
</body>
</html>